/**
 * @description Monitor Dashboard Component
 */

import React, { Component, Fragment } from 'react'
import { Card } from 'antd'
import echarts from 'echarts'
import { injectIntl, intlShape } from 'react-intl'

class MonitorDashboard extends Component {
  static propTypes = {
    intl: intlShape.isRequired
  }
  constructor(props) {
    super(props)
    this.state = {
      data: [100, 20, 30, 5, 2, 1]
    }
    this.drawPos = React.createRef()
    this.drawCharts = this.drawCharts.bind(this)
  }
  componentDidMount() {
    this.drawCharts(this.state.data)
  }
  // Draw chart
  drawCharts(dataSet) {
    const myChart = echarts.init(this.drawPos.current)
    const { formatMessage } = this.props.intl
    const option = {
      title: {
        text: formatMessage({
          id: 'i18n_monitor_alarm_dashboard_clothing_type_label'
        })
      },
      tooltip: {},
      legend: {
        data: [
          formatMessage({ id: 'i18n_monitor_alarm_dashboard_sales_label' })
        ]
      },
      xAxis: {
        data: [
          formatMessage({
            id: 'i18n_monitor_alarm_dashboard_shirt_label'
          }),
          formatMessage({
            id: 'i18n_monitor_alarm_dashboard_woolen_sweater_label'
          }),
          formatMessage({
            id: 'i18n_monitor_alarm_dashboard_snow_spins_label'
          }),
          formatMessage({
            id: 'i18n_monitor_alarm_dashboard_trousers_label'
          }),
          formatMessage({
            id: 'i18n_monitor_alarm_dashboard_high_heels_label'
          }),
          formatMessage({
            id: 'i18n_monitor_alarm_dashboard_socks_label'
          })
        ]
      },
      yAxis: {},
      series: [
        {
          name: formatMessage({
            id: 'i18n_monitor_alarm_dashboard_sales_label'
          }),
          type: 'bar',
          data: dataSet
        }
      ]
    }
    myChart.setOption(option)
  }
  render() {
    const { formatMessage } = this.props.intl
    return (
      <Fragment>
        <Card
          className="mt-2 mx-3"
          title={formatMessage({
            id: 'i18n_monitor_alarm_dashboard_sales_statistics_label'
          })}
        >
          <div ref={this.drawPos} className="w-100 height-12" />
        </Card>
      </Fragment>
    )
  }
}

export default injectIntl(MonitorDashboard)
